import React, { Component } from 'react';
import { phoneReg } from '@/utils/regexp'
import GoBack from "@/components/TheGoBack";
import TheUpload from "@/components/TheUpload";
import {
  Input, Typography, Form, Radio, Select, Button, Table, Space, message, InputNumber, Col, Row, Modal, notification, TimePicker
} from "antd";
import '../style/index.less'
import { getDBAreaList, goodsClassifyTree, transferMoney, storeInfoAdd, queryByListMemberStore, storeServiceLabelList } from "@/request/storeBackManage/storeManage/storeLists.js"
import moment from "moment";

const { confirm } = Modal;
const { TextArea } = Input;
const { Paragraph } = Typography;
class Add extends Component {
  constructor(props) {
    super(props);
    this.state = {
      serviceLabelList: [],//门店标签数据
      userOptions: [],//管理员数据
      addressProvinceOptions: [], //省数据
      addressCityOptions: [], //城市数据
      addressDistrictOptions: [],//区数据
      labelList: [],
      showUpFile: true,
      fileList: [],
      basicDisabled: false, // 线上店铺默认选择
      basicShow: false, //是否显示分账
      financeDisabled: false, // 佣金比例相关
      step: 1,
      verifyStatus: 0, //支付宝校验状态
      verifyLoading: false,
      verifyText: "支付校验",
      columns: [
        {
          title: '类目',
          dataIndex: 'label',
          key: 'label',
        },
        {
          title: '别名',
          dataIndex: 'alias',
          key: 'alias',
          width: '12%',
        },
        {
          title: '抽佣比例（%）',
          dataIndex: 'commissionRatio',
          width: '30%',
          key: 'commissionRatio',
          render: (text, record, index) => {
            if (record.children === null) {
              return <InputNumber
                disabled={!this.state.financeDisabled}
                max={100}
                min={0}
                placeholder="请设置0~100的比例"
                precision={2}
                onChange={(e) => this.ratioChange(e, record, index)}
              />
            } else {
              return '-'
            }
          }
        },
      ],
      dataSource: [],
      mapModalVisible: false,
      mapData: ""
    };
  }

  componentDidMount = () => {
    this.mapSetData()
    this.getAddressList()
    this.goodsClassifyData()
    this.getUserData()
    this.getSoreServiceList()
  }
  getData = async (e) => {
    // this.addressForm.setFieldsValue({
    //   address: [{
    //     areaId: '100000',
    //     areaName: "北京市",
    //   },
    //   {
    //     areaId: '110100',
    //     areaName: "北京市",
    //   },
    //   {
    //     areaId: '110101',
    //     areaName: "东城区",
    //   },
    //   ]
    // })
  }
  // 管理员下拉
  getUserData = async () => {
    await queryByListMemberStore().then(res => {
      if (res.code === 0 && res.data) {
        let data = res.data.map(v => {
          return {
            label: `${v.memberId}-${v.nickName}`,
            value: v.memberId
          }
        })
        this.setState({ userOptions: data })
      }
    })
  }
  // 门店标签
  getSoreServiceList = async () => {
    await storeServiceLabelList().then(res => {
      if (res.code === 0 && res.data) {
        let data = res.data.map(v => {
          return {
            value: v.serviceLabelId,
            label: v.storeServiceName
          }
        })
        this.setState({ serviceLabelList: data })
      }
    })
  }
  // 商品类目
  goodsClassifyData = async () => {
    await goodsClassifyTree().then(res => {
      if (res.code === 0) {
        this.setState({ dataSource: res.data })
      }
    })
  }
  // 地址数据
  getAddressList = async () => {
    await getDBAreaList({ level: 1 }).then(res => {
      if (res.code === 0 && res.data) {
        this.setState({ addressProvinceOptions: res.data })
      }
    })
  }
  // 选择省级
  handleProvinceChange = async (params) => {
    this.addressForm.setFieldsValue({ addressCityId: undefined, addressDistrictId: undefined })
    await getDBAreaList({ level: 2, areaParentId: params.value }).then(res => {
      if (res.code === 0 && res.data) {
        this.setState({ addressCityOptions: res.data })
      }
    })
  }
  // 选择地区
  handleCityChange = async (params) => {
    this.addressForm.setFieldsValue({ addressDistrictId: undefined })
    await getDBAreaList({ level: 3, areaParentId: params.value }).then(res => {
      if (res.code === 0 && res.data) {
        this.setState({ addressDistrictOptions: res.data })
      }
    })
  }
  mapSetData = () => {
    const that = this;
    window.addEventListener("message", function (event) {
      if (event) {
        if (event.data.latlng) {
          event.data.latlng.lat = `${event.data.latlng.lat}`.substring(
            0,
            `${event.data.latlng.lat}`.indexOf(".") + 7
          );
          event.data.latlng.lng = `${event.data.latlng.lng}`.substring(
            0,
            `${event.data.latlng.lng}`.indexOf(".") + 7
          );
        }
        that.setState(
          {
            mapData: event.data,
          }
        );
      }
    });
  }
  mapCancel = () => {
    this.setState({
      mapModalVisible: false
    }, () => {
      const { mapData } = this.state;
      if (mapData) {
        this.basicForm.setFieldsValue({
          addressMapLocation: mapData.poiname,
          addressLat: mapData.latlng.lat,
          addressLnt: mapData.latlng.lng,
          addressDetail: mapData.poiaddress,
        });
        // this.inputRef.current.value = mapData.poiname;
        // this.setState({ inputValue: mapData.poiname });
      }
    })
  }
  /**
   * @desc 图片上传回调
   * @params arr {value} 上传的图片数据
   * @params string {filed} 表单item name
   * */
  getDetailsFileResult = (value, filed) => {
    if (value && value.length) {
      let arr = value.map(v => {
        if (v.response && v.response.code === 0) {
          return v.response.data
        } else {
          return v.url
        }
      }).join(',')
      this.basicForm.setFieldsValue({
        [filed]: arr
      })
    }
  }
  /**
   * @desc 基础信息表单修改
   * @params obj {changedValues} 当前修改数据项
   * @params obj {allValues} 表单所有数据
   * */
  basicVlChange = (changedValues, allValues) => {
    if ("isProprietary" in changedValues) {
      const bl = changedValues["isProprietary"] === 'N'
      if (bl) {
        this.basicForm.setFieldsValue({
          businessCategory: '4'
        })
        this.setState({
          basicShow: bl
        })
      }
      this.setState({
        basicDisabled: bl
      })
    }
    if ("businessCategory" in changedValues) {
      const bl = changedValues["businessCategory"] === '4';
      let flag = false;
      if (bl) {
        if (this.basicForm.getFieldValue(["account"]) === 0) {
          flag = true
        }
      }
      this.setState({
        basicShow: bl,
        financeDisabled: flag
      })
    }
    if ("openCommission" in changedValues) {
      const bl = changedValues["openCommission"] === 1;
      const dataSource = this.state.dataSource;
      this.financeForm.resetFields()
      this.setState({
        financeDisabled: bl,
        dataSource: []
      }, () => {
        this.setState({
          dataSource: dataSource
        })
      })
    }
  }
  /**
   * @desc 确认自定义密码验证
   * @params Reg {rule} 验证规则
   * @params string {value} 需要验证的字符串
   * @params fun {callback} 回调函数
   * */
  validatePassword = (rule, value, callback) => {
    const password = this.adminForm.getFieldsValue(['password']).password;
    if (value !== password) {
      callback('请确认两次输入的密码一致')
    }
    callback()
  }
  /**
   * @desc 下一步操作表单校验
   * */
  next = () => {
    this.basicForm.validateFields().then(values => {
      this.adminForm.validateFields().then(values => {
        this.addressForm.validateFields().then(values => {
          this.setState({
            step: 2
          })
        }).catch(errorInfo => {
          message.error('售后地址管理未填写');
        })
      }).catch(errorInfo => {
        message.error('管理员信息未填写');
      })
    }).catch(errorInfo => {
      message.error('基础信息未填写');
    })
  }
  /**
   * @desc 上一步
   * */
  prev = () => {
    this.setState({
      step: 1
    })
  }
  /**
   * @desc 抽佣比例数值修改
   * @params string {value} 输入的值
   * @params obj {record} 当前表格行数据
   * */
  ratioChange = (e, record) => {
    console.log(e, 'commissionRatio');
    let val = null
    if (e > 100) {
      val = 100
    } else if (e < 0) {
      val = 0
    } else {
      val = e
    }
    record.commissionRatio = val
  }
  testValues = (t, s) => {

  }
  /**
   * @desc 支付校验弹窗
   * */
  verifyModal = () => {
    const info = this.financeForm.getFieldsValue()
    if (info["alipayAccountName"] && info["alipayAccount"]) {
      confirm({
        title: '支付账户校验',
        okText: "确认转账",
        content: <div><p>支付账户校验需要对该账户发起一笔转账：转账成功则校验通过，转账失败则校验失败。</p>
          <p>本次转账金额为：¥0.1，请点击确认转账按钮完成账户校验。</p></div>,
        onOk: async () => {
          let formValue = this.financeForm.getFieldsValue()
          let params = {
            ...this.financeForm.getFieldsValue(),
            price: 0.1 * 100
          }
          await transferMoney({ ...params }).then(res => {
            if (res.code === 0) {
              let payState = ''
              switch (res.data.payState) {
                case 0:
                  payState = '验证中'
                  break
                case 1:
                  payState = '支付成功'
                  break
                case 2:
                  payState = '支付失败'
                  break
                default:
                  payState = '-'
              }
              let verifyText = payState //验证文案状态
              res.data.payState =
                this.setState({
                  verifyLoading: true,
                  verifyStatus: res.data.payState,
                  verifyText
                }, () => {
                  this.openNotification()
                  this.setState({ verifyLoading: false })
                })
            }
          })
        },
        onCancel() {
        },
      });
    } else {
      message.error("请填写支付宝信息")
    }
  }
  /**
   * @desc 支付状态 notification 提示
   * */
  openNotification = () => {
    const { verifyText, verifyStatus } = this.state;
    let btn = null;
    if (verifyStatus === 2) {
      btn = (
        <Button type="primary" size="small" onClick={() => notification.destroy()}>
          知道了
        </Button>
      );
    }
    const args = {
      btn,
      closeIcon: "",
      key: "updatable",
      message: '支付账户校验',
      description: <div>
        <p>已发起转账，请勿关闭当前商户的操作页面，正在核查结果，可点击刷新获取。</p>
        <p>校验结果：{verifyText} <Button type="link" onClick={this.updateVerifyStatus}>刷新</Button></p>
        <p style={{ color: "#afafaf" }}>说明：该笔转账记录可在商户资金账户管理中查询到相应的流水记录。</p>
      </div>,
      duration: 0,
      className: 'warp'
    };
    notification.open(args);
  }
  /**
   * @desc 更新支付状态
   * */
  updateVerifyStatus = () => {
    this.setState({
      verifyStatus: 2,
      verifyText: "验证完成"
    }, () => {
      this.openNotification()
    })
  }
  /**
   * @desc 修改支付宝账号提示
   * */
  editTipModal = () => {
    confirm({
      title: '修改账户',
      okText: "继续",
      content: <div>当前账户已通过校验，修改账户后需要重新进行一笔支付校验，是否继续修改？</div>,
      onOk: () => {
        this.setState({
          verifyStatus: 0,
          verifyText: "验证中"
        })
      }
    });
  }
  guide(arr, level) {
    return arr.reduce((prev, cur) => {
      if (level < 2) {
        const res = this.guide(cur.children, level + 1)
        prev = prev.concat(...res)
      } else {
        if (cur.hasOwnProperty('commissionRatio') && cur.commissionRatio !== '') {
          if (cur.commissionRatio !== null) {
            prev.push({
              goodsClassifyId: cur.value,
              commissionRatio: cur.commissionRatio === null ? undefined : Number(cur.commissionRatio) * 100,
              goodsClassifyLevel: 2
            })
          }
        }
      }
      return prev
    }, [])
  }
  /**
   * @desc 保存提交数据
   * */
  onFinish = () => {
    this.financeForm.validateFields().then(async () => {
      const { verifyStatus, financeDisabled, addressData } = this.state;
      const basicInfo = this.basicForm.getFieldsValue()
      const adminInfo = this.adminForm.getFieldsValue()
      const addressInfo = this.addressForm.getFieldsValue()
      const financeInfo = this.financeForm.getFieldsValue()
      const dataInfo = { ...basicInfo, ...adminInfo, ...addressInfo, ...financeInfo }
      const dataSource = this.state.dataSource
      // if (financeDisabled && verifyStatus !== 2) {
      //   message.error("收款账户(支付宝) 校验未通过，请点击支付校验通过后再保存。")
      //   return false
      // }
      // 抽佣比例
      if (financeDisabled && this.guide(dataSource, 0).length === 0) {
        message.error("请至少填写1个类目的抽佣比例！")
        return false
      }
      // 门店标签
      let serviceLabelIds = ''
      if (basicInfo && basicInfo.hasOwnProperty('serviceLabelIds')) {
        serviceLabelIds = basicInfo.serviceLabelIds.join(',')
      }
      // 营业时间
      if (basicInfo.hasOwnProperty('time')) {
        basicInfo.storeOpenTime = moment(basicInfo.time[0]).format('HH:mm')
        basicInfo.storeCloseTime = moment(basicInfo.time[1]).format('HH:mm')
        delete basicInfo.time
      }
      // 身份证照片正反
      let corporateIdentityCardPositive = undefined, corporateIdentityCardBack = undefined
      if (basicInfo.corporateIdentityCard) {
        let arr = basicInfo.corporateIdentityCard.split(',')
        if (arr.length === 2) {
          corporateIdentityCardPositive = arr[0]
          corporateIdentityCardBack = arr[1]
        }
        corporateIdentityCardPositive = arr[0]
      }
      delete basicInfo.corporateIdentityCard
      delete addressInfo.address

      let params = {
        storeInfo: {
          ...basicInfo,
          corporateIdentityCardBack,
          corporateIdentityCardPositive,
          // primaryType: 'shop',
          // secondaryType: 'selfSupport',
          serviceLabelIds,
          orderNotifyUrl:basicInfo.orderNotifyUrl
        }, //基本信息
        adminInfo: { ...adminInfo }, //管理员信息
        financeInfo: {
          ...financeInfo,
          storeCommissionList: this.guide(dataSource, 0) //抽佣信息
        } //财务信息
      }
      //售后信息
      if (basicInfo.businessCategory === "4") {
        params.salesReturnAddress = {
          ...addressInfo,
          addressProvinceId: addressInfo.addressProvinceId.value, //省级id
          addressCityId: addressInfo.addressCityId.value, // 市级id
          addressDistrictId: addressInfo.addressDistrictId.value, //区级id
          addressProvince: addressInfo.addressProvinceId.label, //省级名称
          addressCity: addressInfo.addressCityId.label, // 市级名称
          addressDistrict: addressInfo.addressDistrictId.label //区级名称
        }
      }

      // 判断财务信息是否有值
      if (!financeDisabled) {
        params.financeInfo = undefined
      }
      await storeInfoAdd({ ...params }).then(res => {
        if (res.code === 0 && res.data) {
          message.success('商家新建成功！')
          this.props.history.goBack()
        }
      })
    })

  }

  render() {
    let {
      mapModalVisible,
      labelList,
      basicDisabled,
      basicShow,
      financeDisabled,
      fileList,
      step,
      columns,
      dataSource,
      addressDistrictOptions,
      addressCityOptions,
      verifyLoading,
      verifyStatus,
      addressProvinceOptions,
      userOptions,
      serviceLabelList
    } = this.state;
    const url = `https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&locations=45.80216,126.5358&key=5GEBZ-RHECU-SWOVM-26CNG-EBL7E-YEFWM&referer=myapp`
    return (
      <div className={"p-layout-box commodity-content"}>
        <GoBack history={this.props.history} title={"新建商家"} />
        <div className={step === 1 ? "show" : "hide"}>
          <Paragraph strong={true}>
            <pre>基础信息</pre>
          </Paragraph>
          <Form
            ref={ref => this.basicForm = ref}
            labelCol={{ flex: "200px" }}
            wrapperCol={{ flex: "300px" }}
            onValuesChange={this.basicVlChange}
          >
            <Form.Item
              label="商家名称"
              name="storeName"
              rules={[{ required: true }]}
            >
              <Input allowClear maxLength={15} showCount />
            </Form.Item>
            <Form.Item
              label="类型"
              name="isProprietary"
              rules={[{ required: true, message: '请选择类型' }]}
            >
              <Radio.Group>
                <Radio value={'Y'}> 自营 </Radio>
                <Radio value={'N'}> 非自营 </Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item
              label="经营类目"
              name="businessCategory"
              rules={[{ required: true, message: '请选择经营类目' }]}
            >
              <Select allowClear disabled={basicDisabled}>
                <Select.Option value={'0'}>实体门店</Select.Option>
                <Select.Option value={'1'}>酒店</Select.Option>
                <Select.Option value={'2'}>医院</Select.Option>
                <Select.Option value={'3'}>上门服务</Select.Option>
                <Select.Option value={'4'}>线上店铺</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="店铺logo"
              name="storeLogo"
              rules={[{ required: true, message: '请上传店铺logo' }]}
            >
              <TheUpload
                fileList={fileList}
                getFileResult={(e) => this.getDetailsFileResult(e, "storeLogo")}
                len={1}
              />
            </Form.Item>
            <Form.Item
              label="营业执照"
              name="businessLicense"
            >
              <TheUpload
                fileList={fileList}
                drawWaterMark={true}
                markText={'仅供哈奇马商城入驻专用'}
                getFileResult={(e) => this.getDetailsFileResult(e, "businessLicense")}
                len={1}
              />
            </Form.Item>
            <Form.Item
              label="法人身份证正反面"
              name="corporateIdentityCard"
            >
              <TheUpload
                fileList={fileList}
                getFileResult={(e) => this.getDetailsFileResult(e, "corporateIdentityCard")}
                len={2}
              />
            </Form.Item>
            {
              basicShow ? <Form.Item
                label="是否分账"
                name="openCommission"
                rules={[{ required: true, message: '请选择是否分账' }]}
              >
                <Radio.Group>
                  <Radio value={1}> 是 </Radio>
                  <Radio value={0}> 否 </Radio>
                </Radio.Group>
              </Form.Item> : <>
                <Form.Item
                  rules={[{ required: true }]}
                  label="门店标签"
                  name={'serviceLabelIds'}>
                  <Select
                    placeholder="请选择门店标签"
                    mode="multiple"
                    allowClear
                    options={serviceLabelList}
                  />
                </Form.Item>
                <Form.Item label="营业时间" rules={[{ required: true }]} name="time">
                  <TimePicker.RangePicker format={'HH:mm'} />
                </Form.Item>
                <Form.Item
                  rules={[{ required: true }]}
                  label="门店图片"
                  name={'storeShowFile'}>
                  <TheUpload getFileResult={value => this.getDetailsFileResult(value, 'storeShowFile')} maxSize={10} len={1} />
                </Form.Item>
                <Form.Item
                  rules={[{ required: true }]}
                  label="店铺环境"
                  name={'storeEnvironment'}>
                  <TheUpload getFileResult={value => this.getDetailsFileResult(value, 'storeEnvironment')} maxSize={10} len={4} />
                </Form.Item>
                {/*<Form.Item*/}
                {/*  rules={[{ required: true }]}*/}
                {/*  label="店铺logo"*/}
                {/*  name={'storeLogo'}>*/}
                {/*  <TheUpload getFileResult={value => this.getDetailsFileResult(value, 'storeLogo')} maxSize={10} len={1} />*/}
                {/*</Form.Item>*/}
                <Form.Item noStyle>
                  <Row gutter={8} style={{ width: 620 }}>
                    <Col flex="auto">
                      <Form.Item
                        name="addressMapLocation"
                        label="门店地址"
                        rules={[{ required: true }]}
                      >
                        <Input placeholder="打开地图选择地址" />
                      </Form.Item>
                    </Col>
                    <Col flex="100px">
                      <Button onClick={() => this.setState({ mapModalVisible: true })}>打开地图</Button>
                    </Col>
                  </Row>
                </Form.Item>
                <Form.Item
                  rules={[{ required: true }]}
                  name={"addressLnt"}
                  label="经度">
                  <InputNumber placeholder="请输入经度" />
                </Form.Item>
                <Form.Item
                  rules={[{ required: true }]}
                  name={"addressLat"}
                  label="纬度">
                  <InputNumber placeholder="请输入纬度" />
                </Form.Item>
                <Form.Item
                  name={"addressDetail"}
                  label="详细地址(选填)">
                  <Input placeholder="请输入详细地址" />
                </Form.Item>
              </>
            }
            {/* {
              basicShow && basicDisabled && <Form.Item
                name={"orderNotifyUrl"}
                label="订单回调地址">
                <Input placeholder="请输入订单回调地址" />
              </Form.Item>
            } */}
          </Form>
          <Paragraph strong={true}>
            <pre>管理员信息</pre>
          </Paragraph>
          <Form
            ref={ref => this.adminForm = ref}
            labelCol={{ flex: "200px" }}
            wrapperCol={{ flex: "300px" }}
            autoComplete={"off"}
          >
            <Form.Item
              rules={[{ required: true }]}
              label="联系人"
              name={'storeContacts'}>
              <Input placeholder="请输入联系人" />
            </Form.Item>
            <Form.Item
              rules={[{ required: true, message: "请输入手机号" }, {
                pattern: phoneReg,
                message: '请输入正确手机号'
              }]}
              label="联系电话"
              name={'userMobile'}>
              <Input allowClear maxLength={11} showCount placeholder="请输入联系电话" />
            </Form.Item>
            {/* {
              !basicShow && <Form.Item
                label="管理员"
                name="adminId"
                rules={[{ required: true, message: "请选择管理员" }]}
              >
                <Select
                  showSearch
                  optionFilterProp="label"
                  filterOption={(input, option) => option.label.includes(input)}
                  options={userOptions}
                  placeholder="请选择管理员" />
              </Form.Item>
            } */}

            <Form.Item
              label="管理员账号"
              name="loginName"
              rules={[
                { required: true },
                {
                  pattern: /(?!^(\d+|[a-zA-Z]|)[~!@#$%^&*()_.]$)^[\w~!@#$%^&*()_.]/,
                  message: "管理员账号只能输入英文字母和数字"
                }
              ]}
            >
              <Input allowClear maxLength={30} showCount />
            </Form.Item>
            <Form.Item
              label="管理员姓名"
              name="userName"
              rules={[{ required: true }]}
            >
              <Input allowClear maxLength={30} showCount />
            </Form.Item>
            <Form.Item
              label="管理员手机号"
              name="adminMobile"
              rules={[{ required: true, message: "请输入手机号" }, {
                pattern: phoneReg,
                message: '请输入正确手机号'
              }]}
            >
              <Input allowClear maxLength={11} showCount />
            </Form.Item>
            <Form.Item
              label="输入密码"
              name="password"
              rules={[{ required: true, message: "请输入密码" }, {
                pattern: /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{8,16}$/,
                message: "密码应为字母，数字，特殊符号(~!@#$%^&*()_.)，两种及以上组合，8-16位字符串，如：abcd@1234"
              }]}
            >
              <Input.Password allowClear />
            </Form.Item>
            <Form.Item
              label="确认密码"
              name="confirmPassword"
              rules={[{ required: true, message: "请确认密码" }, { validator: this.validatePassword }]}
            >
              <Input.Password allowClear />
            </Form.Item>
          </Form>
          <div style={{ display: basicShow ? 'block' : 'none' }}>
            <Paragraph strong={true}>
              <pre>售后地址管理</pre>
            </Paragraph>
            <Form
              name="address"
              ref={ref => this.addressForm = ref}
              labelCol={{ flex: "200px" }}
              wrapperCol={{ flex: "300px" }}
            >
              <Form.Item
                label="收件人"
                name="addresseeName"
                rules={[{ required: basicShow }]}
              >
                <Input allowClear maxLength={30} showCount />
              </Form.Item>
              <Form.Item
                label="联系电话"
                name="addresseeMobile"
                rules={[{ required: basicShow, message: "请输入手机号" }, {
                  pattern: phoneReg,
                  message: '请输入正确手机号'
                }]}
              >
                <Input allowClear maxLength={11} showCount />
              </Form.Item>
              <Form.Item
                label='省市区'
                name="address"
                rules={[{
                  required: basicShow,
                  validator(_, value) {
                    return Promise.resolve();
                  },
                }]}
              >
                <Form.Item
                  noStyle
                  shouldUpdate={(prevValues, currentValues) => prevValues.timeType !== currentValues.timeType}
                >
                  {({ getFieldValue }) => {
                    return <div style={{ display: "flex", alignItems: "baseline" }}>
                      <Form.Item name="addressProvinceId"
                        rules={[{
                          required: basicShow,
                          message: '请选择省份'
                        }]}
                        style={{ marginBottom: 0 }}
                      >
                        <Select
                          style={{ width: 120, marginRight: 7 }}
                          onChange={this.handleProvinceChange}
                          options={addressProvinceOptions}
                          labelInValue
                          fieldNames={{
                            label: 'areaName',
                            value: 'areaId',
                          }}
                        />
                      </Form.Item>
                      <Form.Item name="addressCityId"
                        rules={[{
                          required: basicShow,
                          message: '请选择城市'
                        }]}
                        style={{ marginBottom: 0 }}
                      >
                        <Select
                          style={{ width: 120, marginRight: 7 }}
                          onChange={this.handleCityChange}
                          options={addressCityOptions}
                          labelInValue
                          fieldNames={{
                            label: 'areaName',
                            value: 'areaId',
                          }}
                        />
                      </Form.Item>
                      <Form.Item name="addressDistrictId"
                        rules={[{
                          required: basicShow,
                          message: '请选择地区'
                        }]}
                        style={{ marginBottom: 0 }}
                      >
                        <Select
                          style={{ width: 120, marginRight: 7 }}
                          options={addressDistrictOptions}
                          labelInValue
                          fieldNames={{
                            label: 'areaName',
                            value: 'areaId',
                          }}
                        />
                      </Form.Item>
                    </div>
                  }}
                </Form.Item>
              </Form.Item>
              <Form.Item
                label="详细地址"
                name="addressDetail"
                rules={[{ required: basicShow }]}
              >
                <TextArea allowClear rows={4} maxLength={50} showCount />
              </Form.Item>
            </Form>
          </div>

          <Space className={"center"}>
            <Button onClick={() => this.props.history.goBack()}>取消</Button>
            <Button type="primary" onClick={() => this.next()}>下一步</Button>
          </Space>
        </div>

        <div className={step === 2 ? "show" : "hide"}>
          <Paragraph strong={true}>
            <pre>财务信息</pre>
          </Paragraph>
          <Form
            name="finance"
            ref={ref => this.financeForm = ref}
            labelCol={{ flex: "200px" }}
            wrapperCol={{ flex: "300px" }}
            onValuesChange={this.testValues}
          >

            {/* <Spin spinning={verifyLoading} tip="校验中..."> */}
            <Form.Item
              label="账户名称(支付宝)"
              name="alipayAccountName"
              rules={[{ required: financeDisabled }]}
            >
              <Input allowClear disabled={!financeDisabled || verifyStatus === 2} maxLength={40}
                showCount />
            </Form.Item>
            {/* <Row> */}
            {/* <Col flex={"500px"}> */}
            <Form.Item
              label="收款账户(支付宝)"
              name="alipayAccount"
              rules={[{ required: financeDisabled }]}
            >
              <Input allowClear disabled={!financeDisabled || verifyStatus === 2} maxLength={30}
                showCount />
            </Form.Item>
            {/* </Col> */}
            {/* <Col>
                  {
                    verifyStatus === 0 && <Button disabled={!financeDisabled} type="link"
                      onClick={this.verifyModal}>支付校验</Button>
                  }
                  {
                    verifyStatus === 2 && <Button disabled={!financeDisabled} type="link"
                      onClick={this.editTipModal}>修改</Button>
                  }
                </Col> */}
            {/* </Row> */}
            {/* </Spin> */}
            <Form.Item
              label="抽佣比例"
              name="commissionRatio"
              rules={[{
                required: financeDisabled,
                validator(_, value) {
                  return Promise.resolve();
                },
              }]}
              wrapperCol={{ flex: 'cale(100% - 200px)' }}
            >
              <Table
                columns={columns}
                dataSource={dataSource}
                pagination={false}
                scroll={{ y: 500 }}
                rowKey={'value'}
              />
            </Form.Item>
          </Form>
          <Space className={"center"}>
            <Button onClick={() => this.prev()}>上一步</Button>
            <Button type="primary" onClick={() => this.onFinish()}>保存</Button>
          </Space>
        </div>
        <Modal
          title=""
          width={500}
          onCancel={this.mapCancel}
          visible={mapModalVisible}
          footer={null}
        >
          <iframe
            title="map"
            style={{
              width: 400,
              height: 700,
              border: "1px solid #fafafa",
              marginLeft: "20px",
            }}
            src={url}
          />
        </Modal>
      </div>
    );
  }
}

export default Add;
